import React from 'react';
import { useEffect, useRef, useState } from 'react';
import {doCamera, getCameraDetail,getCameraDateList,getCameraTimeList,getCameraRecordBackUrl} from "../../api";
import { Spin } from 'antd';
import './style.css';

const Camera = ({
    videoURl,
    camera_id
}) => {
    const [loading, setLoading] = useState(true);
    const [is_show_op, setShowOp] = useState(false);
    const [date_list, setDateList] = useState([]);
    const [time_list, setTimeList] = useState([]);
    const [selected, setSelected] = useState("");
    const [selected2, setSelected2] = useState("");
    const handleChange = event => {
        setSelected(event.target.value);
        getCameraTimeList({id:camera_id,date:event.target.value}).then((res)=>{
            setTimeList(res.data)
        });
    };
    const handleChange2 = event => {
        setSelected2(event.target.value);

    };
    const playBack = () =>{
        getCameraRecordBackUrl({id:camera_id,date:selected,time:selected2}).then((res)=>{
            if(res.data.play_url){
                if(player){
                    player.destroy();
                }
                init(res.data.play_url)
            }
        })
    };
    const getData = () => {
        if(videoURl){
            init(videoURl);
        }
        else{
            getCameraDetail({ id: camera_id }).then((res) => {
                // setPlayUrl(res.data.play_url);
                setLoading(false);
                setShowOp(true);
                init(res.data.play_url);
                getCameraDateList().then((res)=>{
                    setDateList(res.data);
                    setSelected(res.data[0].id)
                });
                getCameraTimeList({id:camera_id}).then((res)=>{
                    setTimeList(res.data)
                    setSelected2(res.data[0].id)
                });
            }).catch((err)=>console.log(err)).
            finally(()=>{
                setLoading(false);
            });

        }

    }
    const doDirection = (_command) => {
        setLoading(true)

        doCamera({ id: camera_id, command: _command }).then((res) => {
            console.log('控制方向',_command)
            setLoading(false);

        }).catch((err) => { setLoading(false); })
    }
    let player = null;
    const videoRef = useRef(null);
    const init = (play_url) => {
        // const playUrl = 'http://flv.bdplay.nodemedia.cn/live/bbb.flv';
        const playUrl = play_url;
        player = new window.Jessibuca({
            container: videoRef.current,
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
            text: "",
            isFlv: true,
            loadingText: "加载中",
            decoder: "/decoder.js",
            debug: false,
            loadingTimeout: 10,
            loadingTimeoutReplay: true,
            timeout: 10,
            heartTimeout: 10,
            heartTimeoutReplay: true,
            showBandwidth: false, // 显示网速
            operateBtns: {
                fullscreen: true,
                screenshot: false,
                play: true,
                audio: false,
            },
            isNotMute: false,
        });
        player.play(playUrl);

        // return () => {
        //     console.log('end')
        //     player.destroy();
        // }
    };

    useEffect(() => {
console.log(  videoURl,
    camera_id);
        getData();
        // init();
        return () => {
            if(player){
                player.destroy();
            }

        }
    }, []);

    return (
        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} ref={videoRef} >
            {is_show_op &&(<div className='operation-div'>
                <div className="left-div" onClick={()=>doDirection('left')}></div>
                <div className="right-div" onClick={()=>doDirection('right')}></div>
                <div className="top-div" onClick={()=>doDirection('up')}></div>
                <div className="bottom-div" onClick={()=>doDirection('down')}></div>
                <div className="stop-div" onClick={()=>doDirection('stop')}></div>
                <div className="amp" onClick={()=>doDirection('zoomin')}></div>
                <div className="reduce" onClick={()=>doDirection('zoomout')}></div>
            </div>)}


            <Spin size="large" spinning={loading} style={{zIndex:2}} />
            {/*回放选项*/}
            {is_show_op &&(
                <div style={{height: '30px',lineHeight:'30px', width: '400px', position: 'absolute', right: '0',top:'20px', zIndex: '2',opacity:'0.6'}}>
                    <select className="select-content" style={{width: '120px'}} value={selected} onChange={handleChange}>
                        {date_list.map((subItem, subIndex) => (
                            <option
                                key={subIndex}
                                value={subItem.id}
                            >
                                {subItem.name}
                            </option>
                        ))}
                    </select>
                    <select className="select-content" style={{width: '170px',marginLeft:'10px'}} value={selected2} onChange={handleChange2}>
                        {time_list.map((subItem, subIndex) => (
                            <option
                                key={subIndex}
                                value={subItem.id}
                            >
                                {subItem.name}
                            </option>
                        ))}
                    </select>
                    <button onClick={playBack} style={{height:'30px',lineHeight:'30px',color:'white','width':'50px',marginLeft:'10px',border:'1px solid #165b65',background:'linear-gradient(270deg, #1f4b55 0%, #12434e 100%)'}}>回放</button>
                </div>
            )}

        </div>

    );
};

export default Camera;
